<!DOCTYPE html>
<html lang="zh">
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta charset="utf-8"/>
	<title>Petri网执行器</title>
	<!-- lib -->
	<link rel="stylesheet" type="text/css" href="./lib/bootstrap/css/bootstrap.min.css">

	<script type="text/javascript" src="./lib/jquery-1.11.0.js"></script>
	<script type="text/javascript" src="./lib/bootstrap/js/bootstrap.min.js"></script>

	<!-- modules -->
	<script type="text/javascript" src="./js/module/PetriNet.js"></script>
	<script type="text/javascript" src="./js/module/PetriNetView.js"></script>
	<script type="text/javascript" src="./js/module/PetriNetExecutor.js"></script>

	<script type="text/javascript" src="./js/index.js"></script>
	<link rel="stylesheet" type="text/css" href="./css/index.css">
</head>
<body>
	<nav class="navbar navbar-default" role="navigation" id="nav">
		<div class="container-fluid">
			<!-- Brand and toggle get grouped for better mobile display -->
			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
				<span class="sr-only">Toggle navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<div class="navbar-header">
				<a id='info' href='#' title="使用说明" class="navbar-brand" data-container="body" data-toggle="popover" data-placement="bottom">
				  经典Petri网
				</a>
				<div id="info-body" class="hidden">
					<dl>
						<dt>创建</dt>
						<dd>
							<ul>
								<li>空白处右键可创建变迁或库所</li>
								<li>右键变迁或库所可选择创建有向弧连接</li>
								<li>右键库所可选择创建令牌（托肯）</li>
							</ul>
						</dd>
						<dt>属性修改</dt>
						<dd>
							<ul>
								<li>右键变迁或库所可弹出属性框</li>
								<li>右键有向弧剪头可设置连线数量</li>
							</ul>
						</dd>
						<dt>移动</dt>
						<dd>
							<ul>
								<li>鼠标按紧变迁或库所可进行拖动</li>
							</ul>
						</dd>
						<dt>连线</dt>
						<dd>
							<ul>
								<li>连线过程中右键可取消连线</li>
							</ul>
						</dd>
						<dt>多选</dt>
						<dd>
							<ul>
								<li>按住ctrl键并按下鼠标可进行多选</li>
								<li>按下delete键移除元素</li>
							</ul>
						</dd>
					</dl>
				</div>
			</div>
			
			<!-- Collect the nav links, forms, and other content for toggling -->
			<div class="collapse navbar-collapse navbar-ex1-collapse">
				<ul class="nav navbar-nav navbar-right">
					<li id="new"><a href="javascript:void(0);"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span>&nbsp;新建</a></li>
					<li id="open"><a href="javascript:void(0);"><label for="file-get"><span class="glyphicon glyphicon-open" aria-hidden="true"></span>&nbsp;打开文件</label></a></li>
					<li id="save"><a href="javascript:void(0);"><span class="glyphicon glyphicon-export" aria-hidden="true"></span>&nbsp;另存为</a></li>
					<li id="run"><a href="javascript:void(0);"><span class="glyphicon glyphicon-play" aria-hidden="true"></span>&nbsp;运行</a></li>
				</ul>
				<input type="file" class="hidden" id='file-get' accept="application/json">
			</div><!-- /.navbar-collapse -->
		</div>
	</nav>
	<div id="area"></div>
	<div id="runArea-container" class="hidden panel panel-default">
		<div id="control" class="panel-heading">
			<button type="button" class="close" aria-hidden="true">&times;</button>
			<button class="btn btn-sm btn-default" data-opt='change-speed' type="button" data-toggle="collapse" data-target="#autoRunOption" aria-expanded="false" aria-controls="autoRunOption">
			  <span class="glyphicon glyphicon-cog"></span>
			</button>
			<div class="collapse" id="autoRunOption">
				<div class="form-horizontal">
					<div class="form-group">
						<label class="col-xs-4 control-label">速度:</label>
						<div class="col-xs-7">
							<select class='form-control' id="autoRunSpeed">
						  		<option value="1000">慢速</option>
						  		<option value="300" selected="selected">中速</option>
						  		<option value="100">快速</option>
						  	</select>
						</div>
					</div>
				</div>
			</div>
			<div class="btn-group">
				<div class="btn btn-warning btn-sm" data-opt="backward-left"><span class="glyphicon glyphicon-fast-backward"></span>&nbsp;第一步</div>
				<div class="btn btn-warning btn-sm" data-opt="backward"><span class="glyphicon glyphicon-backward"></span>&nbsp;上一步</div>
				<div class="btn btn-primary btn-sm" data-opt="play"><span class="glyphicon glyphicon-play"></span>&nbsp;运行</div>
				<div class="btn btn-danger btn-sm" data-opt="pause"><span class="glyphicon glyphicon-pause"></span>&nbsp;停止</div>
				<div class="btn btn-success btn-sm" data-opt="forward"><span class="glyphicon glyphicon-forward"></span>&nbsp;下一步</div>
				<div class="btn btn-success btn-sm" data-opt="forward-right"><span class="glyphicon glyphicon-fast-forward"></span>&nbsp;最后一步</div>
			</div>
			<div class="btn btn-info btn-sm" data-opt="step"><span class="glyphicon glyphicon-step-forward"></span>&nbsp;单步执行</div>
		</div>
		<div id="runArea" class="panel-body"></div>
	</div>

	
	<div id="menus" class="hidden">
		<ul class="list-group" id='global-menu'>
			<li class="list-group-item btn btn-info create" data-type='place'>
				<div>
					<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>&nbsp; <div class="place"></div>
				</div>
			</li>
			<li class="list-group-item btn btn-info create" data-type='transition'>
				<div>
					<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>&nbsp; <div class="transition"></div>
				</div>
			</li>
		</ul>
		<ul class="list-group" id='place-menu'>
			<li class="list-group-item editable">
				<div>
					<div class="form-group">
						<label>name:</label>
						<input type="text" class="form-control" id="place-name" data-property='name'>
					</div>
					<div class="form-group">
						<div class="text-right">
							<label class="pull-left">Tokens:<span id="token-count"></span></label>
							<div class="btn btn-primary btn-xs" id="add-token">
								<span class='glyphicon glyphicon-plus'></span>
							</div>
							<div class="btn btn-danger btn-xs" id="sub-token">
								<span class='glyphicon glyphicon-minus'></span>
							</div>
						</div>
							
						<br>
						<div id="tokenArea" title="0">
						</div>
						
					</div>
				</div>
			</li>
			<li class="list-group-item btn btn-info connect" data-require='transition'>
				<div class='text-center'>
					<div class='connection'><div class='chevron glyphicon glyphicon-chevron-right'></div></div>
				</div>
			</li>
			<li class="list-group-item btn btn-danger" id="remove-place">
				<div class="text-center">
					<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
				</div>
			</li>
		</ul>
		<ul class="list-group" id='transition-menu'>
			<li class="list-group-item editable">
				<div>
					<div class="form-group">
						<label>name:</label>
						<input type="text" class="form-control" id="transition-name" data-property='name'>
					</div>
				</div>
			</li>
			<li class="list-group-item btn btn-info connect" data-require='place'>
				<div class='text-center'>
					<div class='connection'><div class='chevron glyphicon glyphicon-chevron-right'></div></div>
				</div>
			</li>
			<li class="list-group-item btn btn-danger" id="remove-transition">
				<div class="text-center">
					<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
				</div>
			</li>
		</ul>
		<ul class="list-group" id='connection-menu'>
			<li class="list-group-item editable">
				<div>
					<div class="form-group">
						<label>name:</label>
						<input type="text" class="form-control" id="connection-name" data-property='name'>
					</div>
					<div class="form-group">
						<label>count:</label>
						<input type="number" class="form-control" id="connection-count" data-property='count'>
					</div>
				</div>
			</li>
			<li class="list-group-item btn btn-danger" id="remove-connection">
				<div class="text-center">
					<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
				</div>
			</li>
		</ul>
	</div>
	<div id="chooseBox" class="hidden"></div>
</body>
</html>